
<table border="0" style="margin: auto;">
  <tr>
    <td></td>
    <td><button id="z-plus-button">z<sub>i+1</sub></button></td>
    <td></td>
  </tr>
  <tr>	
    <td><button id="t-minus-button">t<sub>j-1</sub></button></td>
    <td></td>
    <td><button id="t-plus-button">t<sub>j+1</sub></button></td>
  </tr>
  <tr>
    <td></td>
    <td><button id="z-minus-button">z<sub>i-1</sub></button></td>
    <td></td>
  </tr>
</table>
<hr noshade>
<div style="font-size: 12px;">
  <p><b>Level:</b> <span id="navigator-lev-label"></span></p>
  <p><b>Time:</b><br><span id="navigator-date-label"></span></p>
</div>

<hr noshade>

<!-- The Select Level link -->
<p id="select-z-link">
  <a href="#">Select Level...</a>
</p>
<div id="select-z" style="display: none; font-size: 12px;">
  <span id="level-container"><p><b>Level</b>: <span id="level-picker-container"></span></p></span>

  <span style="font-size: 14px; float: right;">
    <button id="select-z-close">Close</button>
  </span>

  <br><br>
  <hr noshade>

</div>

<!-- The Select Time link -->
<p id="select-t-link">
  <a href="#">Select Time...</a>
</p>
<div id="select-t" style="display: none; font-size: 12px;">
  <p>
    Start time is <span id="navigator-start-time" style="font-weight: bold;"></span>.<br>
    There are <span id="navigator-num-tsteps"></span> timesteps.
  </p>    
  <div id="select-t-tabs">
    <ul>
      <li><a href="#tfixed-tab">Fixed</a></li>
      <li><a href="#tvarying-tab">Animation</a></li>
    </ul>
    <div id="tfixed-tab">
      Date: <input type="text" id="fixed-time-date-picker" />
      <p>Hr: <span id="fixed-time-hour-picker"></span> Min: <span id="fixed-time-min-picker"></span></p>
    </div>
    <div id="tvarying-tab">
     <div id="varying-time-enabled">
      <b>Start:</b>
      <br>Date: <input type="text" id="varying-time-date-picker1" />
      <p>Hr: <span id="varying-time-hour-picker1"></span> Min: <span id="varying-time-min-picker1"></span></p>
      <hr noshade>
      <b>End:</b>
      <br>Date: <input type="text" id="varying-time-date-picker2" />
      <p>Hr: <span id="varying-time-hour-picker2"></span> Min: <span id="varying-time-min-picker2"></span></p>
     </div>
     <div id="varying-time-disabled">Animations are currently disabled for this dataset.</div>
    </div>
  </div>

  <span style="font-size: 14px; float: right;">
    <button id="select-t-apply">Apply</button>
    <button id="select-t-close">Close</button>
  </span>
  <br><br>
  <hr noshade>
</div>

<!-- The Select Spatial link -->
<p>
  <a id="select-spatial-link" href="#">Select Spatial...</a>
</p>
<div id="select-spatial" style="display: none;">
  <div id="map" style="height: 200px; width: 270px;"></div>
  
  <span style="float: right;">
    <span id="select-spatial-pointbox-set">
      <input name="pointbox" type="radio" id="select-spatial-point" />
      <label for="select-spatial-point">Point</label>

      <input name="pointbox" type="radio" id="select-spatial-box" checked="checked" />
      <label for="select-spatial-box">Box</label>
    </span>
    <button id="select-spatial-whole-globe">Whole Globe</button>
    <button id="select-spatial-close">Close</button>
  </span>

</div>

